<template>
  <div class="sidebar">
    <el-menu
      unique-opened
      :default-active="activeIndex"
      router
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-submenu index="/tables" v-if="rank==='管理员'">
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span slot="title">管理客户</span>
        </template>
        <el-menu-item index="/tables/list">客户列表</el-menu-item>
        <el-menu-item index="/upload-excel">批量导入</el-menu-item>
      </el-submenu>
      <el-submenu index="/scenery" v-if="rank==='管理员'">
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span slot="title">景区信息</span>
        </template>
        <el-menu-item index="/scenery/list">景区列表</el-menu-item>
        <el-menu-item index="/scenery/add">新添景区</el-menu-item>
        <el-menu-item index="/scenery/monitor">景区监控</el-menu-item>
      </el-submenu>
      <el-submenu index="/notes" v-if="rank==='管理员'">
        <template slot="title">
          <i class="el-icon-s-comment"></i>
          <span slot="title">管理酒店</span>
        </template>
        <el-menu-item index="/notes/list">酒店列表</el-menu-item>
      </el-submenu>
      <el-submenu index="/logs" v-if="rank==='管理员'">
        <template slot="title">
          <i class="el-icon-date"></i>
          <span slot="title">管理公告</span>
        </template>
        <el-menu-item index="/logs/list">公告列表</el-menu-item>
      </el-submenu>

      <el-menu-item index="/setting">
        <i class="el-icon-setting"></i>
        <span slot="title">个人设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Sidebar',
  data() {
    return {
      rank: window.sessionStorage.getItem('rank')
    }
  },
  computed: {
    ...mapGetters(['sidebar']),
    isCollapse() {
      return this.sidebar.opened
    },
    activeIndex() {
      const thisRoutPath = this.$route.path
      if (this.$route.name === 'details') {
        return '/tables/details'
      }
      return thisRoutPath
    }
  },
  methods: {}
}
</script>

<style scoped>
.sidebar {
  background-color: rgb(84, 92, 100);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100vh;
  height: 100%;
}

.el-menu-vertical-demo {
  min-height: 100vh;
  height: 100%;
}

.el-menu-item.is-active,
.el-submenu.is-active >>> .el-submenu__title {
  background: #484e5c !important;
}

.el-submenu .el-menu-item {
  padding-left: 60px !important;
  min-width: auto;
}
.el-submenu.is-active .el-menu-item {
  background: #484e5c !important;
}
.el-submenu.is-active .el-menu-item.is-active {
  background: #3a4046 !important;
}
.el-submenu .el-menu-item:hover {
  padding-left: 60px !important;
  background: rgb(67, 74, 80) !important;
}
.el-menu-item i {
  padding-bottom: 4px;
}

.el-submenu__title i {
  padding-bottom: 4px;
}

@media all and (max-width: 768px) {
  .el-menu--collapse {
    width: 0;
    overflow: hidden;
  }
}
</style>
